import React, {Component} from 'react';
import cs from 'classnames'
import BaseCmpt from '../BaseCmpt';
import './index.css';

class MImageList extends BaseCmpt {

    static defaultProps = {
        data: {
            type: 8,
            style: {
                backgroundColor: '#fff',
            },
            itemStyle: {
                marginRight: '10px',
                marginBottom: '10px'
            },
            textStyle: {
                fontSize: '14px',
                lineHeight: '20px',
            },
            imgStyle: {
                backgroundColor: '#fff',
                height: '100px'
            },
            dataset: {
                imgList: []
            },
            layout: {
                layout: '1',
                column: '2', //列数
                visible: '0', //0.都展示 1.只展示图片 2.只展示文字
                isImgAuto: true,
            }
        }
    };

    constructor(props) {
        super(props);
    }

    render() {
        var {onSelected, selected, data} = this.props;
        var {style, itemStyle = {}, textStyle = {}, imgStyle = {}, dataset, layout} = data;
        var imgList = dataset['imgList'];
        var column = layout.column;
        var itemWid = 100 / column + '%';
        var marginRight = itemStyle.marginRight || 0;
        var marginBottom = itemStyle.marginBottom || 0;

        return (
            <div
                onClick={(e) => {
                    onSelected && onSelected(e)
                }}
                className={cs({'mImageList cmptEle': true, 'cmptEle_selected': selected})}
                style={{...style}}
            >
                <div className="mImageList__inner" style={{marginLeft: marginRight}}>
                    {
                        imgList.map(function (item) {
                            return (
                                <div
                                    className={layout.layout == 2 ? 'mImageListItem mImageListItem_over' : 'mImageListItem'}
                                    style={{
                                        width: itemWid,
                                        paddingRight: marginRight,
                                        marginBottom: marginBottom,
                                    }}
                                    key={item.uid}
                                >
                                    <div className="mImageListItem__inner"
                                         style={{backgroundColor: itemStyle.backgroundColor}}
                                    >
                                        {
                                            layout.visible == 0 || layout.visible == 1 ?
                                                <div className="mImageListItem__imgWrap"
                                                     style={{
                                                         ...imgStyle,
                                                         height: layout.isImgAuto ? 'auto' : imgStyle.height
                                                     }}
                                                >
                                                    < img
                                                        src={item.img || 'http://cdn1.taojinzi.com/xcx/defaultimg1.png'}
                                                        alt=""
                                                        className="mImageListItem__img"
                                                    />
                                                </div>
                                                : null
                                        }
                                        {
                                            layout.visible == 0 || layout.visible == 2 ?
                                                <p className="mImageListItem__text"
                                                   style={textStyle}>{item.title}</p>
                                                : null
                                        }
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
            </div>
        );
    }
}

export default MImageList;
